<template>
    <div class="search">
     <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
    <use xlink:href="#icon-zuojiantou"></use>
     </svg>
     <input type="text" v-model="name" placeholder="周杰伦" @keydown.enter="setnamearr">
    </div>
    <div class="inform">
        <span class="span1">历史</span>
        <span v-for="item in namearr" class="span2" @click="inform(item)">{{item}}</span>
    </div>
    <svg class="icon" aria-hidden="true" style=" position: absolute; right: 10px;top:46px;" @click="delet">
    <use xlink:href="#icon-shanchu_o"></use>
     </svg>
     <!-- 歌单列表 -->
     <div style="margin-top: 20px;display: flex;flex-direction:column;" >
      <div v-for="(item, index) in song" :key="index" class="list" @click="Muscigo(song,index)">
       <span style="margin-left:20px;color: #343434; font-weight: 600">{{ index + 1 }}</span> 
        <div style="left:60px;position: absolute; display:flex;flex-direction: column;justify-content: center;align-items: flex-start;height: 100%;width: 220px;">
          <span style="color: #343434; font-weight: 600">{{item.name}}</span>
          <span  style="color:#cac6c7"
            >{{item.ar[item.ar.length-1].name}}</span
          >
        </div>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;position: absolute;right: 50px;"
          v-if="item.mv"
        >
          <use xlink:href="#icon-playSquare" style="fill:red;"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          style="width: 30px; height: 30px;"
        >
          <use xlink:href="#icon-danlieliebiao"></use>
        </svg>
      </div>
    </div>
</template>
<script>
import { getMusicgc } from '@/request/api/music'
import { searchMusic } from '@/request/api/music'
export default {
   data() {
      return {
  name:"",
  namearr:[],
  song:[]
      }
   },
   computed:{
   
   },
   methods:{
    setnamearr()
    {
        if(this.name!='')
        {
        this.namearr.unshift(this.name)
        this.namearr=[...new Set(this.namearr)]
        if(this.namearr.length>7)
        {
            this.namearr.pop()
        }
        this.searchliebiao(this.name)
        localStorage.setItem('namearr',JSON.stringify(this.namearr))
          this.name=''      
        }
    },
    async searchliebiao(name){
        let datas=await searchMusic(name)
          if(datas.data.result)
          {
             this.song=datas.data.result.songs
          }  
         console.log(this.song)
          console.log(datas)
    },
    Muscigo(song,index){
      //   getMusicgc(this.song[index].id).then(res=>{
      //  this.$store.commit('setgechi',res.data.lrc.lyric )
      // })
      //   if(this.$store.state.playList.indexOf(this.song[index])==-1)
      //   {
      //    this.$store.commit('getsearchMusic',this.song[index])
      //    this.$store.commit('setindex',this.$store.state.playList.length-1)
      //   }
      //  else{
      //  let indexs=this.$store.state.playList.indexOf(this.song[index])
      //   this.$store.commit('setindex',indexs)
      //  }
      this.$store.commit('getMusic',song)
      this.$store.commit('setindex',index)
    },
    inform(item){
        this.searchliebiao(item)
    },
    delet()
    {
        localStorage.removeItem('namearr')
        this.namearr=[]
        document.querySelector('input').focus()
    }
   },
   created(){
//    this.namearr=JSON.parse(localStorage.getItem('namearr'))?JSON.parse(localStorage.getItem('namearr')):[] 
this.namearr=JSON.parse(localStorage.getItem('namearr'))||[]
   }
}
</script>
<style lang="less" scoped>
.search{
    width: 100%;
    display: flex;
    align-content: center;
    padding: .2rem .3rem;
    input{
        border: none;
        border-bottom: 1px solid #000;
        width: 95%;
        margin-left: 5px;
    }
}
.inform{
    display: flex;
    flex-direction: row;
    width: 90%;
    position: relative;
    align-items: center;
   flex-wrap: wrap;
    .span1{
        font-weight: 600;
        margin: 0 10px;
        height: 30px;
     line-height: 30px;
     
    }
    .span2{
     width: 60px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     border-radius: 15px;
     background-color: #D5CCCD;
     margin: 0 10px;
    }
}
.list {
      display: flex;
      justify-content: center;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      align-items: center;
      color: #d8e6f2;
      margin-top: 0.2rem;
      position: relative;
    }
     

</style>
